<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .audio-wrapper {
      background-color: #fcfcfc;
      margin: 10px auto;
      max-width: 670px;
      height: 70px;
      border: 1px solid #e0e0e0;
    }

    .audio-left {
      float: left;
      text-align: center;
      width: 18%;
      height: 100%;
    }

    .audio-left img {
      width: 40px;
      position: relative;
      top: 15px;
      margin: 0;
      display: initial;
      /* 解除与app的样式冲突 */
      cursor: pointer;
    }

    .audio-right {
      margin-right: 2%;
      float: right;
      width: 80%;
      height: 100%;
    }

    .audio-right p {
      font-size: 15px;
      height: 35%;
      margin: 8px 0;

      /* 歌曲名称只显示在一行，超出部分显示为省略号 */
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 243px;
      /* 要适配小屏幕手机，所以最大宽度先设小一点，后面js根据屏幕大小重新设置 */
    }

    .progress-bar-bg {
      background-color: #d9d9d9;
      position: relative;
      height: 2px;
      cursor: pointer;
    }

    .progress-bar {
      background-color: #649fec;
      width: 0;
      height: 2px;
    }

    .progress-bar-bg span {
      content: " ";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      background-color: #3e87e8;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -5px;
      margin-left: -5px;
      cursor: pointer;
    }

    .audio-time {
      overflow: hidden;
      margin-top: -1px;
    }

    .audio-length-total {
      float: right;
      font-size: 12px;
    }

    .audio-length-current {
      float: left;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div class="audio-wrapper">
    <audio>
      <source
        src="http://m7.music.126.net/20200813175105/fc7d63eb550909e04968490be469d7dc/ymusic/2630/1fb7/5ce6/b0edfd30270b691d337cae2a46b9c105.mp3"
        type="audio/mp3">
    </audio>
    <div class="audio-left"><img src="./src/assets/cyzimgs//2.jpg" alt=""></div>
    <div class="audio-right">
      <p style="max-width: 536px;">Beta-B_Kan R. Gao.mp3</p>
      <div class="progress-bar-bg" id="progressBarBg"><span id="progressDot"></span>
        <div class="progress-bar" id="progressBar"></div>
      </div>
      <div class="audio-time"><span class="audio-length-current" id="audioCurTime">00:00</span><span
          class="audio-length-total">01:06</span></div>
    </div>
  </div>
  <script>
    var audio = document.getElementsByTagName('audio')[0];

    // 点击播放/暂停图片时，控制音乐的播放与暂停
    var audioPlayer = document.getElementById('audioPlayer');
    audioPlayer.addEventListener('click', function () {
      // 改变播放/暂停图片
      if (audio.paused) {
        audio.play();
        audioPlayer.src = './src/assets/cyzimgs/3.jpg';
      } else {
        audio.pause();
        audioPlayer.src = './src/assets/cyzimgs/4.jpg';
      }
    }, false);

    // 监听音频播放时间并更新进度条
    audio.addEventListener('timeupdate', function () {
      updateProgress(audio);
    }, false);

    /**
     * 更新进度条与当前播放时间
     * @param {object} audio - audio对象
     */
    function updateProgress(audio) {
      var value = audio.currentTime / audio.duration;
      document.getElementById('progressBar').style.width = value * 100 + '%';
      document.getElementById('progressDot').style.left = value * 100 + '%';
      document.getElementById('audioCurTime').innerText = transTime(audio.currentTime);
    }

    /**
     * 音频播放时间换算
     * @param {number} value - 音频当前播放时间，单位秒
     */
    function transTime(value) {
      var time = "";
      var h = parseInt(value / 3600);
      value %= 3600;
      var m = parseInt(value / 60);
      var s = parseInt(value % 60);
      if (h > 0) {
        time = formatTime(h + ":" + m + ":" + s);
      } else {
        time = formatTime(m + ":" + s);
      }

      return time;
    }

    /**
     * 格式化时间显示，补零对齐
     * eg：2:4  -->  02:04
     * @param {string} value - 形如 h:m:s 的字符串 
     */
    function formatTime(value) {
      var time = "";
      var s = value.split(':');
      var i = 0;
      for (; i < s.length - 1; i++) {
        time += s[i].length == 1 ? ("0" + s[i]) : s[i];
        time += ":";
      }
      time += s[i].length == 1 ? ("0" + s[i]) : s[i];

      return time;
    }
  </script>
</body>

</html>